<template>
  <div class="app-container">
    <el-form class="multiple-from" :model="queryParams" ref="queryForm"
      size="small" :inline="true" v-show="showSearch">

      <el-form-item label="小区名称：" prop="plotId">
        <el-select v-model="queryParams.plotId" placeholder="请选择小区名称" clearable style="width: 170px"
          @change="xiaoquChange()">
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属楼栋：" prop="buildId">
        <el-select v-model="queryParams.buildId" placeholder="请选择楼栋" clearable style="width: 170px"
          @change="loudonChange()">
          <el-option v-for="dict in loudongData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择单元：" prop="unitId">
        <el-select v-model="queryParams.unitId" placeholder="请选择单元" clearable>
          <el-option v-for="(item, index) in danyuanData" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="展示数据">
        <el-select @change="tableShowChange" multiple collapse-tags v-model="tableActiveList" placeholder="请选择需展示数据">
          <el-option v-for="item in tableSelectList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item style="margin-left: auto">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

        <!-- <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button> -->
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button :class="listFlag === 0 ? 'active' : 'unactive'" type="primary" @click="checkList(0)">楼栋列表</el-button>
        <el-button :class="listFlag === 1 ? 'active' : 'unactive'" type="primary" @click="checkList(1)">单元列表</el-button>
        <el-button :class="listFlag === 2 ? 'active' : 'unactive'" type="primary" @click="checkList(2)">住户列表</el-button>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-edit-outline" @click="yijianChaoBiao">一键抄表</el-button>
        <el-button type="primary" icon="el-icon-tickets" @click="piliangChaoBiao">批量抄表</el-button>
        <el-button type="primary" icon="el-icon-search" @click="showSearch = !showSearch"></el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="getList"></el-button>
      </div>
    </div>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="2.5">
        <el-button :class="listFlag === 0 ? 'active' : 'unactive'" type="primary" @click="checkList(0)">楼栋列表</el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button :class="listFlag === 1 ? 'active' : 'unactive'" type="primary" @click="checkList(1)">单元列表</el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button :class="listFlag === 2 ? 'active' : 'unactive'" type="primary" @click="checkList(2)">住户列表</el-button>
      </el-col>
        <el-button type="primary" icon="el-icon-edit-outline" @click="yijianChaoBiao">一键抄表</el-button>
        <el-button type="primary" icon="el-icon-tickets" @click="piliangChaoBiao">批量抄表</el-button>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->

    <el-table @sort-change="tableSortChange" :header-cell-style="{ background: '#444F64', color: '#FFFFFF' }"
      v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" stripe>
      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
      <el-table-column  label="序号" align="center" type="index"></el-table-column>
      <!-- <el-table-column show-overflow-tooltip v-if="listFlag === 2" label="户号" align="center" prop="houseNumber">
        <template slot-scope="scope">
          <div @click="goBalancedView(scope.row)" style="color: rgb(64, 158, 255);cursor: pointer;">
            {{ scope.row.houseNumber }}
          </div>
        </template>
      </el-table-column> -->
      <template v-for="(item) in tableShowList">
            <el-table-column :width="item.width" :sortable="item.sortable" :key="item.value" v-if="item.value === 'houseNumber'"
            show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <div @click="goBalancedView(scope.row)" style="color: rgb(64, 158, 255);cursor: pointer;">
                      {{ scope.row.houseNumber }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else-if="item.value === 'totalFlow'"
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <span>{{convertTotalFlow(scope.row[item.value])}}</span>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else-if="item.value === 'currentHeatOrCold'"
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <span>{{convertCurrentHeatOrCold(scope.row[item.value])}}</span>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else-if="item.value === 'velocityFlow'"
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <span>{{convertVelocityFlow(scope.row[item.value])}}</span>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else-if="item.value === 'thermalPower'"
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <span>{{convertThermalPower(scope.row[item.value])}}</span>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else-if="item.value === 'waterSupplyTemperature' ||item.value === 'returnWaterTemperature'||item.value === 'temperature'"
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
                <template slot-scope="scope">
                  <span>{{scope.row[item.value]}}℃</span>
                </template>
            </el-table-column>
            <el-table-column :min-width	="item.width" :sortable="item.sortable" :key="item.value" v-else
                show-overflow-tooltip :label="item.label" align="center" :prop="item.value"/>
      </template>
      <!-- <el-table-column :width="item.width" :sortable="item.sortable" :key="item.value" v-for="item in tableShowList"
        show-overflow-tooltip :label="item.label" align="center" :prop="item.value">
        <template  slot-scope="scope">
          <div v-if="item.value === 'houseNumber'" @click="goBalancedView(scope.row)" class="houseNumber">{{ scope.row.houseNumber }}</div>
          <span v-else>{{scope.row[item.value]}}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column show-overflow-tooltip label="所属小区名称" align="center" prop="plotName" />
      <el-table-column show-overflow-tooltip label="楼栋" align="center" prop="buildName" />
      <el-table-column show-overflow-tooltip v-if="listFlag !== 0" label="单元" align="center" prop="unitName" />
      <el-table-column show-overflow-tooltip v-if="listFlag === 2" label="楼层" align="center" prop="floor" />
      <el-table-column show-overflow-tooltip v-if="listFlag === 2" label="户号" align="center" prop="houseNumber">
        <template slot-scope="scope">
          <div @click="goBalancedView(scope.row)" class="houseNumber">{{ scope.row.houseNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="瞬时热量" align="center" prop="thermalPower"></el-table-column>
      <el-table-column show-overflow-tooltip label="瞬时流量" align="center" prop="velocityFlow"></el-table-column>
      <el-table-column show-overflow-tooltip label="供水温度" align="center" prop="waterSupplyTemperature" />
      <el-table-column show-overflow-tooltip label="回水温度" align="center" prop="returnWaterTemperature"></el-table-column>
      <el-table-column show-overflow-tooltip label="累计流量" align="center" prop="totalFlow"></el-table-column>
      <el-table-column show-overflow-tooltip label="累计热量" align="center" prop="currentHeatOrCold"></el-table-column>
      <el-table-column show-overflow-tooltip label="热量表抄表时间" align="center" prop="thermalCreateTime"></el-table-column>
      <el-table-column show-overflow-tooltip label="阀门开度" align="center" prop="setOpen"></el-table-column>
      <el-table-column show-overflow-tooltip label="设备编号" align="center" prop="heatCode"></el-table-column>
      <el-table-column show-overflow-tooltip label="阀门表抄表时间" align="center" prop="valveCrateTime"></el-table-column>
      <el-table-column show-overflow-tooltip label="设备编号" align="center" prop="valveCode"></el-table-column>

      <el-table-column show-overflow-tooltip v-if="listFlag === 2" label="室温" align="center"
        prop="nearTemperature"></el-table-column>
      <el-table-column show-overflow-tooltip v-if="listFlag === 2" label="室温抄表时间" align="center"
        prop="valveDataTime"></el-table-column> -->


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">抄表</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="抄表" :visible.sync="dialogVisible" width="500px" append-to-body>
      <div style="margin-left: 30px;color: #fff; margin-bottom: 30px;font-size: 16px;">
        是否对当前设备进行抄表？
      </div>
      <el-form :model="chaobiaoParams" :rules="chaobiaoRules" ref="chaobiaoForm" size="small" :inline="true">
        <el-form-item prop="value" label="抄表类型：" style="margin-left: 30px">
          <el-checkbox-group v-model="chaobiaoParams.value">
            <el-checkbox :key="item.value" v-for="item in typeDataComputed" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelClickOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量抄表" :visible.sync="dialogVisibles" width="500px" append-to-body>
      <div style="margin-bottom: 30px; color: #fff; margin-left: 30px;font-size: 16px;">
        是否对选中设备进行抄表？
      </div>
      <el-form :model="chaobiaoParams" :rules="chaobiaoRules" ref="chaobiaoForm" :inline="true">
        <el-form-item prop="value" label="抄表类型：" style="margin-left: 30px;">
          <el-checkbox-group v-model="chaobiaoParams.value">
            <el-checkbox :key="item.value" v-for="item in typeDataComputed" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="handelClickOkS">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="一键抄表" :visible.sync="dialogVisibleAll" width="500px" append-to-body>
      <div style="margin-bottom: 30px; color: #fff; margin-left: 30px;font-size: 16px;">
        是否对全部设备进行抄表？
      </div>
      <el-form :model="chaobiaoParams" :rules="chaobiaoRules" ref="chaobiaoForm" :inline="true">
        <el-form-item prop="value" label="抄表类型：" style="margin-left: 30px;">
          <el-checkbox-group v-model="chaobiaoParams.value">
            <el-checkbox :key="item.value" v-for="item in typeDataComputed" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAll = false">取 消</el-button>
        <el-button type="primary" @click="handelClickOkAll">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  buildList,
  buildUnitList,
  householdList,
  meteRead,
  oneClickMeter
} from "@/api/onlineMonitor/onlineMonitor";
import {
  listType,
  getType,
  delType,
  addType,
  updateType,
  refreshCache,
} from "@/api/system/dict/type";
import {
  listCPlotSelect,
  listBuildSelect,
  listBuildUnitSelect,
  listCustomModelSelect,
  listHouseholdClassifySelect,
  listEquipmentGroupSelect,
} from "@/api/system/utils";

import { fieldList, fieldInsert } from "@/api/system/field"

// import data1 from "../../utils/data1.json";
// import data2 from "../../utils/data2.json";
// import data3 from "../../utils/data3.json";
// import data5 from "../../utils/data5.json";
// import from "@api/monitoring/"
export default {
  name: "Dict",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      // 抄表
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibleAll: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      showSelection: false,
      // 总条数
      total: 0,
      typeList: [],
      // 小区名字
      xiaoquData: [],
      loudongData: [],
      danyuanData: [],
      typeData: [
        { label: "热量表", value: 1 },
        { label: "阀门", value: 2 },
        // { label: "室温采集器", value: 3 },
      ],
      listFlag: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        unitId: null,
        plotId: null,
        buildId: null,
        equipmentType: null,
        sortType: null,
        fieldNumber: null,
      },
      chaobiaoParams: {
        value: [],
      },
      chaobiaoRules: {
        value: [{ required: true, message: "请选择抄表类型", trigger: "blur" }],
      },
      ids: [],
      meterRow: null,
      // 1.单个抄表 2.多个抄表
      meterStae: 1,
      tableAllSelectlist: [
        {
          label: '所属小区名称',
          value: 'plotName',
          width: '150px',
        },
        {
          label: '楼栋',
          value: 'buildName',
          width: '120px',
        },
        {
          label: '单元',
          value: 'unitName',
          width: '120px',
        },
        {
          label: '楼层',
          value: 'floor',
          width: '120px',
        },
        {
          label: '户号',
          value: 'houseNumber',
          sortable: true,
          width: '120px',
        },
        {
          label: '瞬时热量',
          value: 'thermalPower',
          sortable: true,
          width: '120px',
        },
        {
          label: '瞬时流量',
          value: 'velocityFlow',
          sortable: true,
          width: '120px',
        },
        {
          label: '供水温度',
          value: 'waterSupplyTemperature',
          sortable: true,
          width: '120px',
        },
        {
          label: '回水温度',
          value: 'returnWaterTemperature',
          sortable: true,
          width: '120px',
        },
        {
          label: '累计流量',
          value: 'totalFlow',
          sortable: true,
          width: '120px',
        },
        {
          label: '累计热量',
          value: 'currentHeatOrCold',
          sortable: true,
          width: '130px',
        },
        {
          label: '热量表抄表时间',
          value: 'thermalCreateTime',
          sortable: true,
          width: '150px',
        },
        {
          label: '热量表设备编号',
          value: 'heatCode',
          width: '120px',
        },
        {
          label: '阀门开度',
          value: 'setOpen',
          width: '120px',
        },
        {
          label: '阀门表抄表时间',
          value: 'valveCrateTime',
          sortable: true,
          width: '150px',
        },
        {
          label: '阀门设备编号',
          value: 'valveCode',
          width: '120px',
        },
        {
          label: '室温',
          value: 'temperature',
          width: '120px',
        },
        {
          label: '室温抄表时间',
          value: 'reportTime',
          width: '150px',
        },
      ],
      tableActiveList: [],
    };
  },
  computed: {
    tableSelectList() {
      let excludeList
      if (this.listFlag == 0) {
        excludeList = ['unitName', 'floor', 'houseNumber', 'roomTemperature', 'roomCrateTime']
      } else if (this.listFlag == 1) {
        excludeList = ['floor', 'houseNumber', 'roomTemperature', 'roomCrateTime']
      } else if (this.listFlag == 2) {
        excludeList = []
      }
      return this.tableAllSelectlist.filter(item => {
        return !excludeList.includes(item.value)
      })
    },
    tableShowList() {
      return this.tableSelectList.filter(item => {
        return this.tableActiveList.includes(item.value)
      })
    },
    typeDataComputed() {
      if (this.listFlag == 2) {
        return this.typeData
      } else {
        return this.typeData.filter(item => item.value != 3)
      }
    },
  },
  created() {
    this.getFieldList()
    this.getPlotSelectList();
    
  },
  methods: {
    getFieldList() {
      let model = 2
      let businessType = this.listFlag + 1
      fieldList({ model, businessType }).then(res => {
        if (res.rows.length > 0) {
          this.tableActiveList = res.rows.map(item => item.fieldName)
        } else {
          this.tableActiveList = tableSelectList.map(item => item.fieldName)
        }
      })
    },
    //抄表
    meterRead(data) {
      if (data.length <= 0) {
        return;
      }
      meteRead(data)
        .then((res) => {
          this.dialogVisible = false;
          this.dialogVisibles = false;
          this.dialogVisibleAll = false;
          this.meterRow = null;
          this.$message.success("操作成功");
        })
        .catch((err) => {
          this.meterRow = null;
        });
    },
    //获取小区下拉列表
    getPlotSelectList() {
      listCPlotSelect({}).then((res) => {
        this.xiaoquData = res.rows;
        this.xiaoquDataAdd = res.rows;
        this.queryParams.plotId = res.rows[0].value
      }).then(res=>{
        listBuildSelect({ plotId:this.queryParams.plotId}).then((res) => {
          this.loudongData = res.rows;
        });
        this.getList();
      });
    },
    //获取楼栋列表
    getBuildList() {
      this.loading = true;
      let data = this.queryParams;
      buildList(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.typeList = res.rows;
      });
    },
    //获取单元列表
    getUnitList() {
      this.loading = true;
      let data = this.queryParams;
      buildUnitList(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.typeList = res.rows;
      });
    },
    //获取住户列表
    getHousehold() {
      this.loading = true;
      let data = this.queryParams;
      householdList(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.typeList = res.rows;
      });
    },
    xiaoquChange() {
      
      listBuildSelect({ plotId: this.queryParams.plotId }).then((res) => {
        this.queryParams.buildId = null;
        this.queryParams.unit = null;
        this.loudongData = res.rows;
        this.danyuanData = [];
      });
    },
    loudonChange() {
      this.danyuanData = [];
      this.queryParams.unitId = null;
      listBuildUnitSelect({ buildId: this.queryParams.buildId }).then((res) => {
        this.queryParams.unit = null;
        this.danyuanData = res.rows;
      });
    },
    // 切换列表
    checkList(num) {
      this.listFlag = num;
      this.queryParams.pageNum = 1;
      this.ids = [];
      this.getFieldList()
      this.getList();
    },
    /** 查询列表 */
    getList() {
      let num = this.listFlag;
      switch (num) {
        case 0:
          this.getBuildList();
          break;
        case 1:
          this.getUnitList();
          break;
        case 2:
          this.getHousehold();
          break;
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => {
        return {
          valveDtuId: item.valveDtuId,
          buildId: item.buildId,
          heatUuid: item.heatUuid,
          heatAddress: item.heatAddress,
          householdId: item.householdId,
          valveAddress: item.valveAddress,
          heatDtuId: item.heatDtuId,
          plotId: item.plotId,
          unitId: item.unitId,
          valveUuid: item.valveUuid,
        };
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.$refs['queryForm'].resetFields();
      this.handleQuery();
    },
    piliangChaoBiao() {
      if (this.showSelection) {
        if (this.ids.length <= 0) {
          this.showSelection = false
        } else {
          this.dialogVisibles = true;
        }
      } else {
        this.showSelection = true
      }
    },
    yijianChaoBiao() {
      this.dialogVisibleAll = true;
    },
    handleDelete(row) {
      this.meterRow = row;
      this.dialogVisible = true;
    },
    // 单个抄表确定
    handelClickOk() {
      this.$refs["chaobiaoForm"].validate((valid) => {
        if (valid) {
          let data = [];
          let type = this.listFlag + 1;
          let equipmentTypes = this.chaobiaoParams.value;
          let objData = {
            valveDtuId: null,
            buildId: null,
            heatUuid: null,
            heatAddress: null,
            householdId: null,
            valveAddress: null,
            heatDtuId: null,
            plotId: null,
            unitId: null,
            valveUuid: null,
          };
          for (const key in objData) {
            objData[key] = this.meterRow[key];
          }
          objData.type = type;
          objData.equipmentTypes = equipmentTypes;
          data.push(objData);
          this.meterRead(data);
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
        }
      });
    },
    // 批量抄表
    handelClickOkS() {
      this.$refs["chaobiaoForm"].validate((valid) => {
        if (valid) {
          let type = this.listFlag + 1;
          let equipmentTypes = this.chaobiaoParams.value;
          let data = this.ids.map((item) => {
            item.type = type;
            item.equipmentTypes = equipmentTypes;
            return item;
          });
          this.meterRead(data)
        } else {
          console.log("error submit!!");
        }
      });
    },
    // 一键抄表
    // handelClickOkAll() {
    //   this.$refs["chaobiaoForm"].validate((valid) => {
    //     if (valid) {
    //       let type = this.listFlag + 1;
    //       let equipmentTypes = this.chaobiaoParams.value;
    //       let data = this.typeList.map((item) => {
    //         return {
    //           valveDtuId: item.valveDtuId,
    //           buildId: item.buildId,
    //           heatUuid: item.heatUuid,
    //           heatAddress: item.heatAddress,
    //           householdId: item.householdId,
    //           valveAddress: item.valveAddress,
    //           heatDtuId: item.heatDtuId,
    //           plotId: item.plotId,
    //           unitId: item.unitId,
    //           valveUuid: item.valveUuid,
    //           type,
    //           equipmentTypes,
    //         };
    //       });
    //       this.meterRead(data);
    //       this.dialogVisible = false;
    //     } else {
    //       console.log("error submit!!");
    //     }
    //   });
    // },
    handelClickOkAll() {
      this.$refs["chaobiaoForm"].validate((valid) => {
        if (valid) {
          let type = this.listFlag + 1;
          let {plotId,buildId,unitId}= this.queryParams
          let {value:equipmentTypes} = this.chaobiaoParams
          console.log(plotId,buildId,unitId,equipmentTypes);
          let data = {
            plotId,
            buildId,
            unitId,
            equipmentTypes,
            type
          }
          oneClickMeter(data).then(res=>{
            this.dialogVisibleAll = false;
            this.$message.success("操作成功");
          }).catch(res=>{
            this.meterRow = null;
          });;
          
        } else {
          console.log("error submit!!");
        }
      });
    },
    goBalancedView(data) {
      if (data.household) {
        this.$router.push({
          path: '/balancedView/resident',
          query: {
            plotId: data.plotId,
            buildId: data.buildId,
            household: data.household,
          }
        })
      }
    },
    tableShowChange(e) {
      let arr = this.tableActiveList.map(item => {
        return {
          fieldName: item,
          model: 2,
          businessType: this.listFlag + 1,
        }
      })
      fieldInsert(arr).then(res => {
        console.log(res)
      })
    },
    tableSortChange({ column, order, prop }) {
      if (order) {
        let numMap = new Map([
          ['thermalPower', 1],
          ['velocityFlow', 2],
          ['waterSupplyTemperature', 3],
          ['returnWaterTemperature', 4],
          ['totalFlow', 5],
          ['currentHeatOrCold', 6],
          ['thermalCreateTime', 7],
          ['valveCrateTime', 8],
        ])
        this.queryParams.fieldNumber = numMap.get(prop)
        this.queryParams.sortType = order === 'ascending' ? 'asc' : 'desc'
      } else {
        this.queryParams.sortType = null
        this.queryParams.fieldNumber = null
      }
      this.getList()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/dict/type/export",
        {
          ...this.queryParams,
        },
        `type_${new Date().getTime()}.xlsx`
      );
    },
    //跳转到平衡视图
    goBalancedView(row) {
      let { plotId, buildId, householdId } = row
      this.$router.push({
        path: '/balancedView/resident',
        query: {
          plotId: plotId,
          buildId: buildId,
          householdId: householdId,
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
//   background: #444F64;
//   color: #CCCCCC;
// }

// ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped {
//   border-radius: 30px;
// }

// ::v-deep .el-dialog {
//   background-color: #374056;
// }

// ::v-deep .el-dialog__title {
//   color: #fff;
// }
.houseNumber {
  cursor: pointer;
  text-align: center;
}

::v-deep .el-dialog .el-form .el-form-item .el-form-item__content {
  margin: 0 !important;

}
</style>
